<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
            <title>SurfTime</title>
            <link rel="stylesheet" type="text/css" href="css/estilo.css">
                <link rel="stylesheet" type="text/css" href="css/jquery.mobile.css">
                    <!-- Usar en caso de que sean necesarias sun funciones o eventos javascript 
                     <script type="text/javascript" charset="utf-8" src="./js/phonegap.js"></script>-->
                    
                    <script type="text/javascript" src="js/jquery.min.js"></script>
                    <script type="text/javascript" src="js/jquery.mobile.min.js"></script>
                    
                    <style>
                        html{
                            /*overflow-x:hidden; overflow-y:hidden;*/
                            overflow:auto;
                        }
                        </style>
                    
                    
                    <script type="text/javascript">
                        
                        var lugar;
                        var dias;
                        var hora;
                        var url_mapa;
                        
                        $(document).ready(function(){	
                                          
                                          $(".logo_cabecera").click(function(){
                                                                    $('#cargador_mapa').attr('src',"");	
                                                                    });
                                          
                                          $(".botones_dias").click(function(){
                                                                   id = $(this).attr('id');
                                                                   cadena = id;
                                                                   subcadena = cadena.substring(0,3);
                                                                   lugar = subcadena;		
                                                                   });
                                          
                                          $("#capa_franjas_tiempo a").click(function(){
                                                                            id = $(this).attr('id');
                                                                            dias = id;				
                                                                            });
                                          
                                          $("#capa_franja_horario a").click(function(){
                                                                            id = $(this).attr('id');
                                                                            cadena = id;
                                                                            subcadena = cadena.substring(2,4);
                                                                            hora = subcadena;
                                                                            hora = parseInt(hora);
                                                                            switch (dias) { 
                                                                            case "t_hoy": 							 
                                                                            hora = hora + 0;
                                                                            if(hora <=11){
                                                                            hora = "0"+hora;						 } 
                                                                            break 
                                                                            case "t_manana": 
                                                                            hora = hora + 24; 
                                                                            break 
                                                                            case "t_pasado": 
                                                                            hora = hora + 48; 
                                                                            break 
                                                                            default: 
                                                                            document.write("Ese dÌa no existe") 	 
                                                                            }
                                                                            //Defined var global. 
                                                                            url_mapa = "http://w3.puertos.es/externo/clima/Predolas/Mapas/" + lugar + "/hs" + hora + ".gif"
                                                                            $('#cargador_mapa').attr('src',url_mapa);
                                                                            });
                                          
                                          $('#mapa').live('pagebeforecreate',function(event){
                                                          $('#cargador_mapa').attr('src',url_mapa);
                                                          $('#cargador_mapa').error(function()
                                                                                    {
                                                                                    alert("Error de Conectividad con el servidor en este momento no es posible mostrar la imag\u00e9n vuelta a intentarlo m\u00e1s tarde.");	
                                                                                    });
                                                          $('#cargador_mapa').show();
                                                          });
                                          
                                          });
                        
                        </script>
    </head>
    <body>
        
        <div style="width:100%; float:left; height:80px;">
            <div style="width:50%; float:left; min-height:60px;">
                <img src="img/logo.png" alt="" />
            </div>
            <div style="width:46%; padding-right:10px; padding-top:10px; float:right; text-align:right; min-height:60px; color:#FFFFFF;">
                &nbsp;
            </div>
        </div>
        <div style="width:100%; float:left;">
            
            
            <!-- P·gina principal -->
            <div data-role="page" id="portada">
                <div data-role="header">
                    <div style="width:50%; float:left; min-height:60px;">
                        <a href="#portada" class="logo_cabecera"><img src="img/logo.png" alt="" /></a>
                    </div>
                    <div style="width:46%; padding-right:10px; padding-top:10px; float:right; text-align:right; min-height:60px; color:#FFFFFF;">
                        &nbsp;
                    </div>
                </div><!-- /header -->
                <div data-role="content">	
                    <div style="width:100%; float:left; text-align:center;" id="capa_lugares_surf">
                        <div class="fila_botones">
                            <div class="ficha_boton" id="boton_1">
                                <a href="#dias" id="Atlantico" class="botones_dias"><img src="img/atlantico.png" alt="Altlantico" /></a>
                            </div>
                            <div class="ficha_boton" id="boton_2">
                                <a href="#dias" id="Baleares" class="botones_dias"><img src="img/baleares.png" alt="Baleares" /></a>
                            </div>
                        </div>
                        <div class="fila_botones">
                            <div class="ficha_boton" id="boton_3">
                                <a href="#dias" id="Cadiz" class="botones_dias"><img src="img/cadiz.png" alt="Cadiz" /></a>
                            </div>
                            <div class="ficha_boton" id="boton_4">
                                <a href="#dias" id="Canarias" class="botones_dias"><img src="img/canarias.png" alt="Canarias" /></a>
                            </div>
                        </div>
                        <div class="fila_botones">
                            <div class="ficha_boton" id="boton_5">
                                <a href="#dias" id="Cntabrico" class="botones_dias"><img src="img/cantabrico.png" alt="Cantabrico" /></a>
                            </div>
                            <div class="ficha_boton" id="boton_6">
                                <a href="#dias" id="Mediterraneo" class="botones_dias"><img src="img/mediterraneo.png" alt="Mediterraneo" /></a>
                            </div>
                        </div>
                    </div>
                </div><!-- /content -->
            </div><!-- /page -->
            
            
            
            <!-- Seleccion de los dias -->
            <div data-role="page" id="dias">
                
                <div data-role="header">
                    <div style="width:50%; float:left; min-height:60px;">
                        <a href="#portada" class="logo_cabecera"><img src="img/logo.png" alt="" /></a>
                    </div>
                    <div style="width:46%; padding-right:10px; padding-top:10px; float:right; text-align:right; min-height:60px; color:#FFFFFF;">
                        <a href="#portada" data-icon="check"  class="logo_cabecera"><img src="img/volver.png" alt="Volver" title="Volver" /></a>
                    </div>
                </div><!-- /header -->
                
                <div data-role="content">	
                    <div style="width:100%; float:left; text-align:center;" id="capa_franjas_tiempo">
                        <div class="boton_seccion">
                            <a href="#horas" id="t_hoy"><h1>Tiempo para hoy</h1></a>
                        </div>
                        <div class="boton_seccion">
                            <a href="#horas" id="t_manana"><h1>Tiempo para ma&ntilde;ana</h1></a>
                        </div>
                        <div class="boton_seccion">
                            <a href="#horas" id="t_pasado"><h1>Tiempo para pasado ma&ntilde;ana</h1></a>
                        </div>
                    </div>
                </div><!-- /content -->
            </div><!-- /page two -->
            
            
            
            
            <!-- Seleccion de las horas -->
            <div data-role="page" id="horas">
                
                <div data-role="header">
                    <div style="width:50%; float:left; min-height:60px;">
                        <a href="#portada" class="logo_cabecera"><img src="img/logo.png" alt="" /></a>
                    </div>
                    <div style="width:46%; padding-right:10px; padding-top:10px; float:right; text-align:right; min-height:60px; color:#FFFFFF;">
                        <a href="#dias" data-icon="check"  class="logo_cabecera"><img src="img/volver.png" alt="Volver" title="Volver" /></a>
                    </div>
                </div><!-- /header -->
                
                <div data-role="content">	
                    <div style="width:100%; float:left; text-align:center;" id="capa_franja_horario">
                        <div style="width:100%; float:left;">
                            <div class="boton_hora">
                                <a href="#mapa" id="hs0"><h1>00</h1></a>
                            </div>
                            <div class="boton_hora">
                                <a href="#mapa" id="hs3"><h1>03</h1></a>
                            </div>
                            <div class="boton_hora">
                                <a href="#mapa" id="hs6"><h1>06</h1></a>
                            </div>
                        </div>
                        <div style="width:100%; float:left;">
                            <div class="boton_hora">
                                <a href="#mapa" id="hs9"><h1>09</h1></a>
                            </div>
                            <div class="boton_hora">
                                <a href="#mapa" id="hs12"><h1>12</h1></a>
                            </div>
                            <div class="boton_hora">
                                <a href="#mapa" id="hs15"><h1>15</h1></a>
                            </div>
                        </div>
                        <div style="width:100%; float:left;">
                            <div class="boton_hora">
                                <a href="#mapa" id="hs18"><h1>18</h1></a>
                            </div>
                            <div class="boton_hora">
                                <a href="#mapa" id="hs21"><h1>21</h1></a>
                            </div>
                            <div class="boton_hora">
                                <a href="#mapa" id="hs24"><h1>24</h1></a>
                            </div>
                        </div>
                    </div>
                </div><!-- /content -->
            </div><!-- /page two -->
            
            
            
            <!-- Seleccion de la carga del mapa -->
            <div data-role="page" id="mapa">
                
                <div data-role="header">
                    <div style="width:50%; float:left; min-height:60px;">
                        <a href="#portada" class="logo_cabecera"><img src="img/logo.png" alt="" /></a>
                    </div>
                    <div style="width:46%; padding-right:10px; padding-top:10px; float:right; text-align:right; min-height:60px; color:#FFFFFF;">
                        <a href="#horas" data-icon="check"  class="logo_cabecera"><img src="img/volver.png" alt="Volver" title="Volver" /></a>
                    </div>
                </div><!-- /header -->
                
                <div data-role="content">	
                    <div style="width:609px; float:left; text-align:center; padding:0; margin:0;height:100%;">
                        <img src="" alt="" id="cargador_mapa"/>
                    </div> 
                </div><!-- /content -->
            </div><!-- /page two -->
            
        </div>    
        
    </body>
    
</html>